<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>邀请好友</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>

    </style>
</head>

<body>
    <div class="app" v-cloak style="background-color: #D9332E;">
        <div class="invite-new">
            <!-- 活动细则 -->
            <div class="rule">
                <div class="rule-content" @click="showRule = true">活动细则
                </div>
            </div>
            <!-- 保存图片立即分享 -->
            <div class="middle-card">
                <div class="qrcode">
                    <div class="code-text">（邀请码：{{inviteCode}}）</div>
                    <div class="code-content">
                        <div class="code-img" id="qrcode" ref="qrcode"></div>
                        <span>专属二维码</span>
                    </div>
                </div>

                <div class="total-people">
                    平台已有 <span class="count">{{totalInviteCount}}</span> 人赚到了现金
                </div>

                <div class="bottom-btn">
                    <div class="save" @click="savePic">保存图片</div>
                    <div class="share save" @click="showShare">立即分享</div>
                </div>

                <div class="notice">
                    * 保存图片至相册或分享链接给好友注册即可！
                </div>
            </div>

            <!-- 底部已邀请人数 -->
            <div class="invite-bottom">
                <div class="title">
                    <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/invite_coin.png" width="26" height="26" alt="">
                    <span> 已邀请{{myTotalCount}}人 </span>
                    <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/invite_coin.png" width="26" height="26" alt="">
                </div>

                <div class="invite-list-content">
                    <div class="item-title">
                        <span class="item time">时间</span>
                        <span class="item phone">手机号</span>
                        <span class="item status">认证</span>
                        <span class="item award">奖励</span>
                    </div>

                    <div class="des">
                        <div class="empty-data" v-if="inviteList.length==0">暂无数据</div>
                        <div v-else class="menu" v-for="(item,index) in inviteList" :key="index">
                            <span class="content time">{{item.registerDate|handleTime}}</span>
                            <span class="content phone">{{item.phone}}</span>
                            <span class="content status content-green">{{item.certificationType|filterStatus}}</span>
                            <span class="content award content-red">{{item.certificationReward}}</span>
                        </div>
                    </div>

                    <div class="look_detail" @click="lookDetail()">
                        <span>查看详情</span>
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/invite_right_arrow.png" width="11" height="11" alt="">
                    </div>
                </div>
            </div>

            <!-- 活动说明 -->
            <div class="activity-des">
                说明：本活动最终解释权归上海紫竹智能科技有限公司所有，如发现刷单等违反活动规则的舞弊行为，不予发放奖励。
            </div>
        </div>

        <!-- 邀请卡片  -->
        <div class="invite-new-share" style="position: absolute; bottom: 100000px;" id="invite-pic" ref="invitePicContainer">
            <!-- ***的分享 -->
            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/invite_share_bg.png" width="100%" height="auto" alt="">
            <div class="top" v-show="false">
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/invite_star.png" alt="" width="11" height="12">
                <span>您的好友*以杰邀请您领取</span>
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/invite_star.png" alt="" width="11" height="12">
            </div>

            <!-- 分享的二维码   -->
            <div class="share-qrcode-content">
                <div class="share-qrcode">
                    <div class="code-text">邀请码：<span>{{inviteCode}}</span> </div>
                    <div class="code-content">
                        <div class="code-img" ref="qrcodeShare"></div>
                        <span>扫码注册</span>
                    </div>
                </div>
                <span class="des"> *本活动最终解释权归上海紫竹智能科技有限公司所有</span>
            </div>
        </div>

        <!-- 活动细则 -->
        <van-popup v-model="showRule" position="right" :style="{ height: '100%',width:'100%' }">
            <div class="invite-rule">
                <div class="title">
                    活动细则
                    <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/rule_icon_close.png" alt="" width="15" height="15"
                        @click="showRule = false">
                </div>
                <div class="content">
                    1、开始时间：即日起<br>
                    2、什么是全民经纪人：是铁蟹网定期推出的凭借邀请码推荐机械设备相关行业人士注册并获得平台佣金奖励的一种经纪分佣计划；<br>
                    3、经纪人资格：凡铁蟹网认证客户均可获得全民经纪人资格；<br>
                    4、邀请规则：活动期间分享经纪人专属二维码或邀请链接给好友，好友通过邀请链接注册认证后即视为一个有效邀请（非活动时间内的邀请不计入奖励范畴）；<br>
                    5、奖励规则：每邀请一个好友注册并认证奖励10元红包（被邀请好友也得10元奖励，且升级为企业认证再奖励10元）；<br>
                    6、提现规则：邀请人奖励可在APP-【我的】-【钱包】里发起提现；被邀请人奖励金在完成认证后即可提现，无最低提现额度限制，同一微信最多支持2个新用户提现；<br>
                    7、什么是平安防疫保障险：平安防疫保障险是铁蟹网与平安保险联合推出的保险计划，产品包含：新型冠状病毒感染肺炎的伤残/身故保险金10万（扩展责任）；航空意外伤残/身故保险金20万；公共交通意外伤残/身故保险金10万。<br>
                    8、防疫险领取：添加客服微信（kf-tiexiemall）或QQ（245827741）即可领取；<br>
                    9、免责说明：本活动最终解释权归上海紫竹智能科技有限公司所有，如发现作弊行为，本平台有权随时终止活动并不予发放作弊所得奖励的权利。<br>
                </div>

                <button class="close" @click="showRule = false"> 关闭</button>
            </div>
        </van-popup>

    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/html2canvas.min.js"></script>
    <script src="../../script/qrcode.js"></script>

    <script>

        apiready = function () {
            vm = new Vue({
                el: '.app',
                data: {
                    inviteCode: '',
                    inviteUrl: '',
                    inviteCodeImg: '',
                    queryPagram: {
                        byPromoCode: ''
                    },
                    inviteList: [],
                    qrCodeUrl: '',
                    showRule: false,//是否显示活动细则
                    totalInviteCount: 0,//查看有多少人拿到佣金
                    myTotalCount: 0,//我的邀请人数
                    // screenImg: ''
                },
                filters: {
                    handleTime(timestamp) {
                        if (!timestamp) {
                            return ''
                        }
                        var date = new Date(timestamp);
                        Y = date.getFullYear();
                        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                        D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
                        return Y + '-' + M + '-' + D + ' '
                    },

                    // certificationType 认证类型， 0是个人  1 是企业  null 是手机认证
                    filterStatus(certificationType) {
                        switch (certificationType) {
                            case 0:
                                return "个人认证"
                            case 1:
                                return "企业认证"
                            default:
                                return "手机认证"
                        }
                    }
                },
                mounted: function () {
                    this.getPcUrl()
                    this.getInviteTotalCount()
                },
                methods: {
                    //查看详情 邀请列表
                    lookDetail() {
                        api.openWin({
                            name: 'invite_list_win',
                            url: 'invite_list_win.html',
                            bounces: false,
                        });
                    },
                    //获取分享的头部url
                    getPcUrl() {
                        let vm = this
                        common('getSystemSet')({}, function (ret) {
                            vm.inviteUrl = ret.data.pcUrl + "/h5/register.html?byPromoCode=";
                            vm.getInviteCode()
                        })
                    },

                    //获取我的邀请码
                    getInviteCode() {
                        let vm = this
                        mime("getInviteCode")(function (ret) {
                            vm.inviteCode = ret.data
                            vm.queryPagram.byPromoCode = vm.inviteCode
                            vm.inviteUrl = vm.inviteUrl + vm.inviteCode

                            vm.encodeQrImg()
                            vm.getInviteList()
                        })
                    },

                    //查看有多少人拿到佣金
                    getInviteTotalCount() {
                        let vm = this
                        mime("getInviteTotalCount")(function (ret) {
                            vm.totalInviteCount = ret.data
                        })
                    },

                    //qrcode生成二维码 渲染到页面上 android 58 58
                    encodeQrImg() {
                        let vm = this
                        var qrcodeParam = null
                        var qrcodeShareParam = null
                        qrcodeParam = {
                            text: vm.inviteUrl,
                            width: 60,
                            height: 60,
                            colorDark: "#000000",
                            colorLight: "#ffffff",
                            correctLevel: QRCode.CorrectLevel.H
                        }
                        qrcodeShareParam = {
                            text: vm.inviteUrl,
                            width: 90,
                            height: 90,
                            colorDark: "#000000",
                            colorLight: "#ffffff",
                            correctLevel: QRCode.CorrectLevel.H
                        }

                        var qrcode = new QRCode(vm.$refs.qrcode, qrcodeParam);

                        var qrcode = new QRCode(vm.$refs.qrcodeShare, qrcodeShareParam);
                    },

                    //获取邀请列表
                    getInviteList() {
                        let vm = this
                        mime("getInviteList")(vm.queryPagram, function (ret) {
                            vm.inviteList = ret.data
                            vm.myTotalCount = vm.inviteList.length
                            if (vm.inviteList.length > 3) {
                                vm.inviteList = vm.inviteList.slice(0, 3)
                            }
                            console.log(JSON.stringify(ret))
                        })
                    },

                    //分享
                    showShare() {
                        toReportOrShareDialog("INVITE", this.inviteCode, 2, "不玩虚的，直送现金！新人注册即领10元，可提现！")
                    },

                    //保存图片
                    savePic() {
                        let vm = this
                        const resultList = api.hasPermission({
                            list: ['storage']
                        });
                        if (resultList[0].granted) {
                            vm.$nextTick(function () {
                                api.showProgress({
                                    title: '正在保存',
                                    text: '请稍后...',
                                    modal: false
                                });
                                vm.screenshot()
                            })
                        } else {
                            api.requestPermission({
                                list: ['storage'],
                            }, function (ret, err) {
                                if (ret && ret.list && ret.list.length > 0 && ret
                                    .list[0].granted) {
                                    vm.$nextTick(function () {
                                        api.showProgress({
                                            title: '正在保存',
                                            text: '请稍后...',
                                            modal: false
                                        });
                                        vm.screenshot()
                                    })
                                }
                            });
                        }

                    },

                    //截图
                    screenshot() {
                        //生成截图前将滚动条置顶
                        window.pageYoffset = 0;
                        document.documentElement.scrollTop = 0;
                        document.body.scrollTop = 0;

                        var vm = this;
                        var opts = { useCORS: true };
                        //截取图片 document.getElementById("invite-pic")
                        html2canvas(vm.$refs.invitePicContainer, opts).then(function (canvas) {
                            var imgUri = canvas.toDataURL(); // 获取生成的图片的url
                            vm.saveImgToAlbum(imgUri)
                        });
                    },


                    //保存图片到相册
                    saveImgToAlbum(base64Str) {
                        let vm = this
                        var trans = api.require('trans');
                        //去掉 data:image/png;base64, 部分 
                        var base64StrArr = base64Str.split(",")
                        trans.saveImage({
                            base64Str: base64StrArr[1],
                            album: true,
                            imgPath: "fs://img/",
                            imgName: "invite.jpg"
                        }, function (ret, err) {
                            api.hideProgress();
                            console.log(JSON.stringify(err))
                            if (ret.status) {
                                toastMiddle("已保存到相册")
                            } else {
                                toastMiddle(err.msg)
                            }
                        });
                    }

                },
            })
        }
    </script>
</body>

</html>